<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>风场CPS系统</title>
    <link rel="stylesheet" href="../css/common.css">
    <script src="../js/vue.js"></script>
</head>
<body>
    <div class="task fl" id="task">
        <div style="height: 425px;">
                <div class=" task_h clearfix">
                        <p class="task_hl fl" :class="{ selected: isBok}" @click="check(true)">任务</p>
                        <p class="task_hr fl" :class="{ selected: !isBok}" @click="check(false)">通知</p>
                    </div>
                    <div class="mass" v-if="isBok">
                        <div class="mass_l">
                            <table class="mass_table">
                                <tr>
                                    <th class="tab_h">编号</th>
                                    <th class="tab_h" >风机编号</th>
                                    <th class="tab_h1">发生时间</th>
                                    <th class="tab_h2">故障部件</th>
                                    <th class="tab_h3">故障描述</th>
                                </tr>
                                <tr>
                                    <td class="tab_r1">1</td>
                                    <td>22</td>
                                    <td>2015/2/1</td>
                                    <td>变桨系统</td>
                                    <td>变桨紧停、安全链断开变桨紧停</td>
                                </tr>
                                <tr>
                                    <td class="tab_r1">2</td>
                                    <td>15</td>
                                    <td>2015/2/4</td>
                                    <td>偏航系统</td>
                                    <td>偏航斜率故障</td>
                                </tr>
                                <tr>
                                    <td class="tab_r1">3</td>
                                    <td>3</td>
                                    <td>2015/2/6</td>
                                    <td>主控系统</td>
                                    <td>风机发电量异常</td>
                                </tr>
                                <tr>
                                    <td class="tab_r1">4</td>
                                    <td>17</td>
                                    <td>2015/2/22</td>
                                    <td>变桨系统</td>
                                    <td>安全系统紧停</td>
                                </tr>
                                <tr>
                                    <td class="tab_r1">5</td>
                                    <td>17</td>
                                    <td>2015/2/26</td>
                                    <td>变桨系统</td>
                                    <td>风轮超速紧停</td>
                                </tr>
                                <tr>
                                    <td class="tab_r1">6</td>
                                    <td>17</td>
                                    <td>2015/3/2</td>
                                    <td>变桨系统</td>
                                    <td>风轮超速紧停</td>
                                </tr>
                                <tr>
                                    <td class="tab_r1">7</td>
                                    <td>17</td>
                                    <td>2015/3/7</td>
                                    <td>变桨系统</td>
                                    <td>风轮超速紧停</td>
                                </tr>
                                <tr>
                                    <td class="tab_r1">8</td>
                                    <td>20</td>
                                    <td>2015/3/20</td>
                                    <td>变流器系统</td>
                                    <td>变流器冷却水压力故障</td>
                                </tr>
                                <tr>
                                    <td class="tab_r1">9</td>
                                    <td>20</td>
                                    <td>2015/4/4</td>
                                    <td>发电机</td>
                                    <td>高温降容、轴承温度过高</td>
                                </tr>
                                <tr>
                                    <td class="tab_r1">10</td>
                                    <td>15</td>
                                    <td>2015/5/5</td>
                                    <td>齿轮箱</td>
                                    <td>齿轮箱冷却水温度高</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="mass" v-if="!isBok">
                            <div class="mass_l">
                                <table class="mass_table">
                                    <tr>
                                        <th class="tab_h">任务编码</th>
                                        <th class="tab_h" >风机编号</th>
                                        <th class="tab_h1">任务描述</th>
                                        <th class="tab_h2">预期维护时间</th>
                                        <th class="tab_h3">工人类型</th>
                                    </tr>
                                    <tr v-for="item in taskData">
                                        <td class="tab_r1">{{item.task}}</td>
                                        <td>{{item.numnber}}</td>
                                        <td>{{item.describe}}</td>
                                        <td>{{item.predictiontime}}</td>
                                        <td>{{item.worker}}</td>
                                    </tr>
                                </table>
                            </div>
                    </div>
        </div>

        <div class="wind-detail clearfix">
                <table class="tab fl">
                    <thead>
                        <tr>
                            <th>风机号</th>
                            <th>健康值</th>
                            <th>效能</th>
                            <th>限速</th>
                            <th>预测功率</th>
                            <th>生产率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in tableData">
                            <td class="fan-id">{{item.number}}</td>
                            <td class="health green" :class="{yellow: item.heal < 0.8 }">{{item.heal}}</td>
                            <td class="effect">{{item.effect}}</td>
                            <td class="limit-speed">{{item.speed}}</td>
                            <td class="forecast">{{item.predictionpower}}</td>
                            <td class="productivity">{{item.pred}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
     </div>

</body>
<script>
    var App = new Vue({
        el: '#task',
        data(){
            return {
                isBok: true,
                tableData: [
                     { number:1, heal: '0.91', effect: '75%', speed: '0', predictionpower: '1650', pred: '80%'},
                     { number:2, heal: '0.93', effect: '66%', speed: '0', predictionpower: '1350', pred: '83%'},
                     { number:3, heal: '0.78', effect: '53%', speed: '1', predictionpower: '500', pred: '60%'},
                     { number:4, heal: '0.92', effect: '67%', speed: '0', predictionpower: '1593', pred: '87%'},
                     { number:5, heal: '0.88', effect: '75%', speed: '0', predictionpower: '1100', pred: '82%'},
                     { number:6, heal: '0.87', effect: '48%', speed: '0', predictionpower: '1270', pred: '83%'},
                     { number:7, heal: '0.81', effect: '39%', speed: '0', predictionpower: '1493', pred: '76%'},
                     { number:8, heal: '0.86', effect: '65%', speed: '0', predictionpower: '1775', pred: '74%'},
                     { number:9, heal: '0.94', effect: '45%', speed: '0', predictionpower: '1404', pred: '86%'},
                     { number:10, heal: '0.70', effect: '70%', speed: '0', predictionpower: '1551', pred: '75%'},
                     { number:11, heal: '0.46', effect: '46%', speed: '1', predictionpower: '1334', pred: '77%'},
                     { number:12, heal: '0.52', effect: '52%', speed: '0', predictionpower: '980', pred: '88%'},
                ],
                taskData: [
                    {task: 'task001', numnber: '13', describe: '更换齿轮箱滤芯', predictiontime: '2018年3月1日', lineTime: '200', worker: '机械(3) 电器(2)'},
                    {task: 'task002', numnber: '15', describe: '滑环室巡检', predictiontime: '2018年3月1日', lineTime: '30', worker: '机械(1)'},
                    {task: 'task003', numnber: '17', describe: '齿轮箱换油', predictiontime: '2018年3月1日', lineTime: '45', worker: '电器(2)'},
                    {task: 'task004', numnber: '14', describe: '清理叶片', predictiontime: '2018年3月1日', lineTime: '100', worker: '机械(1) 电器(1)'},
                    {task: 'task005', numnber: '18', describe: '齿轮箱改造', predictiontime: '2018年3月1日', lineTime: '250', worker: '机械(2) 电器(2) IT(1)'}
                ]
            }
        },
        methods: {
            check(val) {
                this.isBok = val
            }
        }
    })
</script>
<style>
.task {
    width: 480px;
    height: 926.4px;
    background: #29292b;
}
.task_h {
    width: 100%;
    height: 40px;
}
.task .selected {
    background: #000;
}
.task p {
    width: 50%;
    height: 40px;
    font-size: 17px;
    color: #CCCCCC;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    background: rgba(0,0,0,0.2);
}
.task .mass_l .mass_table {
    margin-top: 10px;
    text-align: center;
    line-height: 25px;
    color: #fff;
    font-size: 14px;
}
.task .mass_l .mass_table tr th{
    text-align: center;
    width:82px;
    height: 25px;
    border: 1px solid #4b4b4b;
    font-weight: normal;
}
.task .mass_l .mass_table tr td {
    text-align: center;
    width: 82px;
    height: 25px;
    border: 1px solid #4b4b4b;
    font-size: 12px;
}
.task .mass_l .mass_table tr th:nth-child(1){
    width: 40px;
}
.task .mass_l .mass_table tr th:nth-child(2){
    width: 40px;
}
.task .mass_l .mass_table tr th:nth-child(3){
    width:100px;
}
.task .mass_l .mass_table tr th:nth-child(4){
    width:150px;
}
.task .mass_l .mass_table tr th:nth-child(5){
    width:150px;
}

.green {
    color: rgb(0, 154, 66)
}
.yellow {
    color: rgb(255, 253, 0);
}
.red {
    color: red;
}
/* 发电管理表格形式展示 */
.wind-detail{width:100%;}
.tab{width: 100%; border:1px solid #353436; color:#ccc; font-size: 12px;}
.tab thead th{ background: #373637; height: 42px; }
.tab tbody td{  height: 38px; text-align: center;}
.tab tbody tr:nth-child(odd) td{background: rgba(35,35,35,0.5);}
.tab tbody tr:nth-child(even) td{background:rgba(31,31,31,0.95);}
</style>
<script src="../js/vue.js"></script>
</html>